import React from 'react'
import PropTypes from 'prop-types'
import {connect} from 'dva'
import {Row, Col, Progress} from 'antd'
import styles from './index.less'
import {color} from 'utils'

const bodyStyle = {
  bodyStyle: {
    height: 432,
    background: '#fff',
  },
}

function Dashboard({dispatch,dashboard}) {
  const {resultList} = dashboard
  if(window.timer){
    clearTimeout(window.timer);
  }
  window.timer = setTimeout(()=>{
    dispatch({type:'dashboard/query'})
  },6000);


  const progress=(arr)=>{
    return arr.map((i)=><label className={styles.labels}>{i.resultId}:{i.Fulfill}/{i.total}<Progress percent={Math.floor(i.Fulfill / i.total * 100)}/></label>)
  }
  const children = resultList.map((item) => <Col lg={12} md={12} sm={24}>
    <div className="content-inner">
      <h2>{item.productName}</h2>
      <br/>
      {progress(item.rate)}
    </div>
  </Col>)


  return (
    <Row gutter={24}>
      {children}
    </Row>
  )
}

Dashboard.propTypes = {
  dashboard: PropTypes.object,
  dispatch: PropTypes.func,
}

export default connect(({dashboard}) => ({dashboard}))(Dashboard)
